import { For } from "solid-js";
import theme, { type Variants } from "@/common/theme";
import Panel from "@/components/Panel";

const variants: (keyof Variants)[] = ["primary", "danger"];

export default function Panels() {
  return (
    <Panel title="Panels" class="bg-white">
      <div class="flex gap-4">
        <Panel title={<h2>Default</h2>} class="flex-1">
          Default
          <br />
          Default
        </Panel>
        <For each={variants}>
          {(variant) => (
            <Panel
              title={variant}
              class={["flex-1", theme[variant].borderColor]}
              titleClass={[theme[variant].bg, theme[variant].textColor]}
              bodyClass="bg-gray-100"
            >
              {variant}
              <br />
              {variant}
            </Panel>
          )}
        </For>
      </div>
    </Panel>
  );
}
